<template>
  <div class="city-page">
    <!-- 导航栏 -->
    <nav class="navbar">
      <div class="nav-container">
        <h1 class="logo">中国城市之旅</h1>
        <ul class="nav-menu">
          <li><router-link to="/" class="nav-link">首页</router-link></li>
          <li><router-link to="/city" class="nav-link active">城市探索</router-link></li>
          <li><router-link to="/about" class="nav-link">关于我们</router-link></li>
        </ul>
      </div>
    </nav>

    <main class="main-content">
      <!-- 搜索区域 -->
      <section class="search-section">
        <div class="search-container">
          <div class="search-header">
            <h2>探索中国城市</h2>
            <p>输入城市名称，发现更多精彩</p>
          </div>
          <div class="search-box">
            <div class="search-input-group">
              <span class="search-icon">🔍</span>
              <input
                  v-model="searchQuery"
                  type="text"
                  placeholder="搜索城市名称..."
                  class="search-input"
                  @keyup.enter="searchCity"
              >
            </div>
            <button @click="searchCity" class="search-btn">
              <span>搜索</span>
              <span class="btn-icon">→</span>
            </button>
          </div>
        </div>
      </section>

      <!-- 城市内容 -->
      <section class="city-content">
        <!-- 城市详情 -->
        <div v-if="selectedCity" class="city-detail-view">
          <div class="city-header">
            <div class="city-basic-info">
              <div class="city-title">
                <span class="city-emoji">{{ selectedCity.emoji }}</span>
                <h2>{{ selectedCity.name }}</h2>
              </div>
              <p class="city-intro">{{ selectedCity.introduction }}</p>
              <div class="city-meta">
                <div class="meta-item">
                  <span class="meta-icon">👥</span>
                  <span class="meta-text">{{ selectedCity.population }}</span>
                </div>
                <div class="meta-item">
                  <span class="meta-icon">🏙️</span>
                  <span class="meta-text">{{ selectedCity.area }}</span>
                </div>
                <div class="meta-item">
                  <span class="meta-icon">⭐</span>
                  <span class="meta-text">{{ selectedCity.rating }}</span>
                </div>
              </div>
            </div>
            <button @click="selectedCity = null" class="back-btn">
              <span>返回列表</span>
            </button>
          </div>

          <!-- 城市信息网格 -->
          <div class="city-info-grid">
            <!-- 基本信息 -->
            <div class="info-card">
              <div class="card-header">
                <div class="card-icon">📊</div>
                <h3>基本信息</h3>
              </div>
              <div class="card-content">
                <div class="info-item">
                  <span class="label">人口数量</span>
                  <span class="value">{{ selectedCity.population }}</span>
                </div>
                <div class="info-item">
                  <span class="label">城市面积</span>
                  <span class="value">{{ selectedCity.area }}</span>
                </div>
                <div class="info-item">
                  <span class="label">城市特色</span>
                  <span class="value">{{ selectedCity.features }}</span>
                </div>
              </div>
            </div>

            <!-- 知名美食 -->
            <div class="info-card">
              <div class="card-header">
                <div class="card-icon">🍜</div>
                <h3>知名美食</h3>
              </div>
              <div class="card-content">
                <div class="food-list">
                  <span v-for="food in selectedCity.foods" :key="food" class="food-item">
                    {{ food }}
                  </span>
                </div>
              </div>
            </div>

            <!-- 旅游景点 -->
            <div class="info-card">
              <div class="card-header">
                <div class="card-icon">🏞️</div>
                <h3>著名景点</h3>
              </div>
              <div class="card-content">
                <div class="attraction-list">
                  <span v-for="attraction in selectedCity.attractions" :key="attraction" class="attraction-item">
                    {{ attraction }}
                  </span>
                </div>
              </div>
            </div>

            <!-- 文化特色 -->
            <div class="info-card">
              <div class="card-header">
                <div class="card-icon">🎭</div>
                <h3>文化特色</h3>
              </div>
              <div class="card-content">
                <p class="culture-text">{{ selectedCity.culture }}</p>
              </div>
            </div>
          </div>
        </div>

        <!-- 城市列表 -->
        <div v-else class="cities-list-view">
          <div class="list-header">
            <h2 class="list-title">中国热门城市</h2>
            <p class="list-subtitle">共 {{ cities.length }} 个城市可供探索</p>
          </div>

          <div class="cities-grid">
            <div
                v-for="city in filteredCities"
                :key="city.id"
                class="city-card"
                @click="selectCity(city)"
            >
              <div class="card-image" :style="{ background: city.color }">
                <span class="city-emoji">{{ city.emoji }}</span>
                <div class="card-badge">{{ city.rating }}</div>
              </div>

              <div class="card-content">
                <h3 class="card-title">{{ city.name }}</h3>
                <p class="card-desc">{{ city.description }}</p>

                <div class="card-tags">
                  <span v-for="tag in city.tags.slice(0, 2)" :key="tag" class="tag">
                    {{ tag }}
                  </span>
                </div>

                <div class="card-stats">
                  <div class="stat">
                    <span class="stat-icon">👥</span>
                    <span class="stat-text">{{ city.population }}</span>
                  </div>
                  <div class="stat">
                    <span class="stat-icon">⭐</span>
                    <span class="stat-text">{{ city.rating }}</span>
                  </div>
                </div>
              </div>

              <div class="card-actions">
                <button class="explore-btn" @click.stop="selectCity(city)">
                  探索详情
                </button>
              </div>
            </div>
          </div>
        </div>
      </section>
    </main>

    <footer class="footer">
      <div class="footer-content">
        <p>&copy; 2024 中国城市之旅官方网站</p>
      </div>
    </footer>
  </div>
</template>

<script>
export default {
  name: 'CityView',
  data() {
    return {
      searchQuery: '',
      selectedCity: null,
      cities: [
        {
          id: 1,
          name: '北京',
          emoji: '🏯',
          color: 'linear-gradient(135deg, #667eea 0%, #764ba2 100%)',
          description: '中国的政治文化中心',
          introduction: '北京是中华人民共和国的首都，拥有3000多年的建城史和860多年的建都史，是世界著名古都和现代化国际城市。',
          population: '2188万人',
          area: '16410平方公里',
          features: '历史文化名城、现代化国际都市',
          rating: '4.8',
          tags: ['首都', '历史文化', '现代化', '美食'],
          foods: ['北京烤鸭', '炸酱面', '豆汁焦圈', '驴打滚', '涮羊肉', '炒肝'],
          attractions: ['故宫', '天安门', '长城', '颐和园', '天坛', '圆明园'],
          culture: '北京作为六朝古都，拥有丰富的历史文化遗产，胡同文化、京剧艺术、老北京传统习俗等构成了独特的京味文化。'
        },
        {
          id: 2,
          name: '上海',
          emoji: '🏙️',
          color: 'linear-gradient(135deg, #f093fb 0%, #f5576c 100%)',
          description: '中国经济金融中心',
          introduction: '上海是中国的经济、金融、贸易、航运中心，是一座充满活力的现代化国际大都市。',
          population: '2487万人',
          area: '6340平方公里',
          features: '现代化建筑、繁华商业',
          rating: '4.7',
          tags: ['经济中心', '现代化', '国际化', '时尚'],
          foods: ['小笼包', '生煎包', '白斩鸡', '排骨年糕', '蟹粉豆腐', '红烧肉'],
          attractions: ['外滩', '东方明珠', '豫园', '南京路', '迪士尼乐园', '陆家嘴'],
          culture: '上海是中西文化交融的典范，既有现代化的摩天大楼，也有传统的石库门建筑，海派文化独具特色。'
        },
        {
          id: 3,
          name: '西安',
          emoji: '🏮',
          color: 'linear-gradient(135deg, #4facfe 0%, #00f2fe 100%)',
          description: '古都长安，丝绸之路起点',
          introduction: '西安是世界四大古都之一，拥有3100多年的建城史和1100多年的建都史，是中华文明的重要发祥地。',
          population: '1295万人',
          area: '10752平方公里',
          features: '历史古都、文化名城',
          rating: '4.6',
          tags: ['历史古都', '丝绸之路', '文化名城', '美食'],
          foods: ['羊肉泡馍', '肉夹馍', '凉皮', '葫芦头', 'biangbiang面', '臊子面'],
          attractions: ['兵马俑', '大雁塔', '钟鼓楼', '城墙', '华清池', '大唐不夜城'],
          culture: '西安作为十三朝古都，承载着厚重的历史文化底蕴，秦腔、皮影戏、剪纸等非物质文化遗产丰富多彩。'
        },
        {
          id: 4,
          name: '成都',
          emoji: '🐼',
          color: 'linear-gradient(135deg, #43e97b 0%, #38f9d7 100%)',
          description: '天府之国，美食之都',
          introduction: '成都是一座有着4500多年文明史和2300多年建城史的历史文化名城，以美食和悠闲生活方式闻名。',
          population: '2093万人',
          area: '14335平方公里',
          features: '美食之都、休闲城市',
          rating: '4.9',
          tags: ['美食之都', '休闲城市', '熊猫故乡', '文化名城'],
          foods: ['火锅', '串串香', '担担面', '龙抄手', '夫妻肺片', '麻婆豆腐'],
          attractions: ['宽窄巷子', '锦里', '武侯祠', '杜甫草堂', '青城山', '都江堰'],
          culture: '成都拥有独特的巴蜀文化，茶馆文化、川剧变脸、蜀绣等非物质文化遗产独具特色。'
        },
        {
          id: 5,
          name: '广州',
          emoji: '🍜',
          color: 'linear-gradient(135deg, #ff9a9e 0%, #fecfef 100%)',
          description: '美食之都，商贸中心',
          introduction: '广州是广东省省会，国家中心城市，是海上丝绸之路的重要起点，素有"食在广州"的美誉。',
          population: '1867万人',
          area: '7434平方公里',
          features: '商贸中心、美食天堂',
          rating: '4.7',
          tags: ['商贸中心', '美食天堂', '岭南文化', '现代化'],
          foods: ['肠粉', '叉烧包', '虾饺', '烧鹅', '白切鸡', '双皮奶'],
          attractions: ['广州塔', '白云山', '陈家祠', '沙面', '上下九', '长隆乐园'],
          culture: '广州是岭南文化的中心，粤剧、广彩、广绣等非物质文化遗产独具特色，早茶文化更是广州生活的重要组成部分。'
        },
        {
          id: 6,
          name: '深圳',
          emoji: '💻',
          color: 'linear-gradient(135deg, #a1c4fd 0%, #c2e9fb 100%)',
          description: '科技创新之城',
          introduction: '深圳是中国改革开放的窗口，是粤港澳大湾区的重要城市，以科技创新和经济发展闻名于世。',
          population: '1756万人',
          area: '1997平方公里',
          features: '科技创新、现代化都市',
          rating: '4.8',
          tags: ['科技创新', '现代化', '经济特区', '年轻城市'],
          foods: ['烧鹅', '乳鸽', '海鲜', '潮汕牛肉丸', '砂锅粥', '椰子鸡'],
          attractions: ['世界之窗', '欢乐谷', '东部华侨城', '大梅沙', '深圳湾公园', '华强北'],
          culture: '深圳作为年轻的城市，融合了全国各地的文化，形成了开放包容、创新进取的城市精神。'
        },
        {
          id: 7,
          name: '杭州',
          emoji: '🏞️',
          color: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
          description: '人间天堂，西湖美景',
          introduction: '杭州是浙江省省会，以"人间天堂"的美誉闻名于世，西湖美景和龙井茶文化是其独特魅力。',
          population: '1193万人',
          area: '16850平方公里',
          features: '西湖美景、数字城市',
          rating: '4.8',
          tags: ['西湖美景', '数字城市', '茶文化', '历史文化'],
          foods: ['西湖醋鱼', '东坡肉', '龙井虾仁', '叫花鸡', '片儿川', '定胜糕'],
          attractions: ['西湖', '灵隐寺', '雷峰塔', '宋城', '千岛湖', '西溪湿地'],
          culture: '杭州拥有深厚的文化底蕴，西湖文化、丝绸文化、茶文化等非物质文化遗产丰富多彩。'
        },
        {
          id: 8,
          name: '南京',
          emoji: '🏛️',
          color: 'linear-gradient(135deg, #84fab0 0%, #8fd3f4 100%)',
          description: '六朝古都，文化名城',
          introduction: '南京是江苏省省会，有"六朝古都"、"十朝都会"之称，是中国四大古都之一。',
          population: '931万人',
          area: '6587平方公里',
          features: '六朝古都、文化名城',
          rating: '4.6',
          tags: ['六朝古都', '文化名城', '历史遗迹', '教育中心'],
          foods: ['盐水鸭', '鸭血粉丝汤', '小笼包', '桂花鸭', '牛肉锅贴', '梅花糕'],
          attractions: ['中山陵', '夫子庙', '明孝陵', '总统府', '玄武湖', '南京博物院'],
          culture: '南京作为六朝古都，拥有丰富的历史文化遗产，金陵文化、云锦工艺等独具特色。'
        },
        {
          id: 9,
          name: '重庆',
          emoji: '🌉',
          color: 'linear-gradient(135deg, #d4fc79 0%, #96e6a1 100%)',
          description: '山城雾都，火锅之都',
          introduction: '重庆是中国西部地区的中心城市，以山城、雾都、火锅之都闻名，是一座充满立体感的城市。',
          population: '3205万人',
          area: '82400平方公里',
          features: '山城特色、火锅文化',
          rating: '4.7',
          tags: ['山城', '火锅之都', '立体城市', '美食天堂'],
          foods: ['重庆火锅', '小面', '酸辣粉', '毛血旺', '辣子鸡', '抄手'],
          attractions: ['洪崖洞', '解放碑', '磁器口', '长江索道', '武隆天坑', '大足石刻'],
          culture: '重庆拥有独特的山城文化，火锅文化、码头文化、巴渝文化等构成了独特的城市魅力。'
        },
        {
          id: 10,
          name: '苏州',
          emoji: '🎋',
          color: 'linear-gradient(135deg, #a6c0fe 0%, #f68084 100%)',
          description: '园林之城，水乡古镇',
          introduction: '苏州是江苏省重要的经济中心，以古典园林和水乡古镇闻名，素有"人间天堂"的美誉。',
          population: '1274万人',
          area: '8657平方公里',
          features: '园林之城、水乡古镇',
          rating: '4.6',
          tags: ['园林之城', '水乡古镇', '丝绸之府', '文化名城'],
          foods: ['松鼠桂鱼', '阳澄湖大闸蟹', '奥灶面', '生煎', '糖粥', '碧螺虾仁'],
          attractions: ['拙政园', '狮子林', '周庄', '同里', '虎丘', '平江路'],
          culture: '苏州拥有深厚的文化底蕴，园林艺术、昆曲、苏绣、评弹等非物质文化遗产世界闻名。'
        },
        {
          id: 11,
          name: '武汉',
          emoji: '🌸',
          color: 'linear-gradient(135deg, #fad0c4 0%, #ffd1ff 100%)',
          description: '江城武汉，九省通衢',
          introduction: '武汉是湖北省省会，中国中部地区的中心城市，素有"九省通衢"之称，是重要的交通枢纽。',
          population: '1232万人',
          area: '8569平方公里',
          features: '交通枢纽、教育中心',
          rating: '4.5',
          tags: ['江城', '交通枢纽', '教育中心', '历史文化'],
          foods: ['热干面', '豆皮', '武昌鱼', '鸭脖', '汤包', '糊米酒'],
          attractions: ['黄鹤楼', '东湖', '户部巷', '武汉大学', '江汉路', '归元寺'],
          culture: '武汉拥有独特的江城文化，码头文化、楚文化、高校文化等构成了多元的城市特色。'
        },
        {
          id: 12,
          name: '厦门',
          emoji: '🏝️',
          color: 'linear-gradient(135deg, #ffecd2 0%, #fcb69f 100%)',
          description: '海上花园，温馨之城',
          introduction: '厦门是福建省副省级城市，以优美的海滨风光和温馨的城市氛围闻名，是著名的旅游城市。',
          population: '516万人',
          area: '1700平方公里',
          features: '海滨城市、旅游胜地',
          rating: '4.7',
          tags: ['海上花园', '旅游城市', '海滨风光', '温馨之城'],
          foods: ['沙茶面', '土笋冻', '海蛎煎', '花生汤', '烧肉粽', '姜母鸭'],
          attractions: ['鼓浪屿', '厦门大学', '环岛路', '曾厝垵', '南普陀寺', '胡里山炮台'],
          culture: '厦门拥有独特的闽南文化，侨乡文化、海洋文化、茶文化等构成了温馨浪漫的城市氛围。'
        }
      ]
    }
  },
  computed: {
    filteredCities() {
      if (!this.searchQuery.trim()) {
        return this.cities
      }
      const query = this.searchQuery.toLowerCase()
      return this.cities.filter(city =>
          city.name.toLowerCase().includes(query) ||
          city.description.toLowerCase().includes(query) ||
          city.tags.some(tag => tag.toLowerCase().includes(query))
      )
    }
  },
  methods: {
    searchCity() {
      if (this.searchQuery.trim()) {
        const foundCity = this.cities.find(city =>
            city.name.toLowerCase().includes(this.searchQuery.toLowerCase())
        )
        this.selectedCity = foundCity || null
      }
    },
    selectCity(city) {
      this.selectedCity = city
      window.scrollTo({ top: 0, behavior: 'smooth' })
    }
  }
}
</script>

<style scoped>
.city-page {
  min-height: 100vh;
  background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}

/* 导航栏样式 */
.navbar {
  background: linear-gradient(135deg, #2c3e50 0%, #34495e 100%);
  padding: 1rem 0;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 2rem;
}

.logo {
  color: white;
  font-size: 1.8rem;
  font-weight: bold;
}

.nav-menu {
  display: flex;
  list-style: none;
  gap: 2rem;
  margin: 0;
  padding: 0;
}

.nav-link {
  color: white;
  text-decoration: none;
  padding: 0.5rem 1rem;
  border-radius: 5px;
  transition: background-color 0.3s;
}

.nav-link.active {
  background: rgba(255, 255, 255, 0.2);
}

.nav-link:hover {
  background: rgba(255, 255, 255, 0.1);
}

/* 搜索区域 */
.search-section {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 3rem 2rem;
  margin-bottom: 2rem;
}

.search-container {
  max-width: 1200px;
  margin: 0 auto;
}

.search-header {
  text-align: center;
  margin-bottom: 2rem;
}

.search-header h2 {
  font-size: 2.5rem;
  margin-bottom: 0.5rem;
}

.search-header p {
  font-size: 1.1rem;
  opacity: 0.9;
}

.search-box {
  display: flex;
  max-width: 600px;
  margin: 0 auto;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 50px;
  overflow: hidden;
  backdrop-filter: blur(10px);
}

.search-input-group {
  flex: 1;
  display: flex;
  align-items: center;
  padding: 0 1rem;
}

.search-icon {
  font-size: 1.2rem;
  margin-right: 0.5rem;
}

.search-input {
  flex: 1;
  background: none;
  border: none;
  color: white;
  font-size: 1rem;
  padding: 1rem 0;
  outline: none;
}

.search-input::placeholder {
  color: rgba(255, 255, 255, 0.7);
}

.search-btn {
  background: #e74c3c;
  color: white;
  border: none;
  padding: 1rem 2rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  cursor: pointer;
  transition: background-color 0.3s;
}

.search-btn:hover {
  background: #c0392b;
}

.btn-icon {
  font-size: 1.2rem;
}

/* 城市内容 */
.city-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem 2rem;
}

/* 城市详情视图 */
.city-detail-view {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 5px 20px rgba(0,0,0,0.1);
}

.city-header {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 3rem 2rem;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

.city-basic-info {
  flex: 1;
}

.city-title {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.city-emoji {
  font-size: 3rem;
}

.city-title h2 {
  font-size: 2.5rem;
  margin: 0;
}

.city-intro {
  font-size: 1.1rem;
  opacity: 0.9;
  margin-bottom: 2rem;
  max-width: 600px;
}

.city-meta {
  display: flex;
  gap: 2rem;
}

.meta-item {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.meta-icon {
  font-size: 1.2rem;
}

.back-btn {
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: none;
  padding: 0.8rem 1.5rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.back-btn:hover {
  background: rgba(255, 255, 255, 0.3);
}

/* 城市信息网格 */
.city-info-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 2rem;
  padding: 2rem;
}

.info-card {
  background: #f8f9fa;
  border-radius: 10px;
  padding: 1.5rem;
  transition: transform 0.3s;
}

.info-card:hover {
  transform: translateY(-2px);
}

.card-header {
  display: flex;
  align-items: center;
  gap: 1rem;
  margin-bottom: 1rem;
}

.card-icon {
  font-size: 2rem;
}

.card-header h3 {
  margin: 0;
  color: #2c3e50;
}

.card-content {
  color: #7f8c8d;
}

.info-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0.5rem 0;
  border-bottom: 1px solid #e0e0e0;
}

.info-item:last-child {
  border-bottom: none;
}

.label {
  font-weight: 500;
}

.value {
  font-weight: 600;
  color: #2c3e50;
}

.food-list, .attraction-list {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.food-item, .attraction-item {
  background: white;
  padding: 0.5rem 1rem;
  border-radius: 20px;
  font-size: 0.9rem;
  border: 1px solid #e0e0e0;
}

.culture-text {
  line-height: 1.6;
}

/* 城市列表视图 */
.cities-list-view {
  padding: 2rem 0;
}

.list-header {
  text-align: center;
  margin-bottom: 3rem;
}

.list-title {
  font-size: 2.5rem;
  color: #2c3e50;
  margin-bottom: 0.5rem;
}

.list-subtitle {
  color: #7f8c8d;
  font-size: 1.1rem;
}

.cities-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
  gap: 2rem;
}

.city-card {
  background: white;
  border-radius: 15px;
  overflow: hidden;
  box-shadow: 0 2px 10px rgba(0,0,0,0.1);
  transition: all 0.3s ease;
  cursor: pointer;
}

.city-card:hover {
  transform: translateY(-5px);
  box-shadow: 0 5px 20px rgba(0,0,0,0.15);
}

.card-image {
  height: 120px;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}

.city-emoji {
  font-size: 3rem;
}

.card-badge {
  position: absolute;
  top: 1rem;
  right: 1rem;
  background: #e74c3c;
  color: white;
  padding: 0.3rem 0.8rem;
  border-radius: 15px;
  font-size: 0.9rem;
  font-weight: bold;
}

.card-content {
  padding: 1.5rem;
}

.card-title {
  font-size: 1.3rem;
  margin-bottom: 0.5rem;
  color: #2c3e50;
}

.card-desc {
  color: #7f8c8d;
  margin-bottom: 1rem;
}

.card-tags {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.tag {
  background: #e3f2fd;
  color: #1976d2;
  padding: 0.3rem 0.8rem;
  border-radius: 12px;
  font-size: 0.8rem;
}

.card-stats {
  display: flex;
  gap: 1rem;
}

.stat {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  color: #7f8c8d;
  font-size: 0.9rem;
}

.card-actions {
  padding: 1rem 1.5rem;
  border-top: 1px solid #e0e0e0;
}

.explore-btn {
  width: 100%;
  background: #3498db;
  color: white;
  border: none;
  padding: 0.8rem;
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 0.3s;
}

.explore-btn:hover {
  background: #2980b9;
}

/* 尾部 */
.footer {
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
  padding: 2rem 0;
  margin-top: 4rem;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  padding: 0 2rem;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .city-header {
    flex-direction: column;
    gap: 1rem;
    text-align: center;
  }

  .city-meta {
    justify-content: center;
  }

  .cities-grid {
    grid-template-columns: 1fr;
  }

  .nav-container {
    flex-direction: column;
    gap: 1rem;
  }
}
</style>